<div class="da-list-wrap">

<div class="da-content-banner">
  <d-breadcrumb>
    <d-breadcrumb-item><a routerLink="/">{{ 'device.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
    <d-breadcrumb-item><a routerLink="/page/device-tools">{{ 'deviceTools.breadcrumb.deviceTools' | translate }}</a></d-breadcrumb-item>
    <d-breadcrumb-item>{{ 'deviceTools.breadcrumb.editDeviceTools' | translate }}</d-breadcrumb-item>
  </d-breadcrumb>
</div>
<div class="da-content-wrapper">

          <div class="card">
            <div class="card-title">
              <p class="form-title">新增工装夹具</p>
            </div>
            <form dForm ngForm [layout]="layoutDirection" [labelSize]="'sm'"[labelAlign]="'end'" class="mt-5" (dSubmit)="submit()">
              <div class="form-body">

                <div class="grid mt-3">
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>编码</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="code" [(ngModel)]="this.fixture.fixtureNum" [dValidateRules]="this.FixtureRules.fixtureNum" disabled>
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>名称</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="name" [(ngModel)]="this.fixture.fixtureName" [dValidateRules]="this.FixtureRules.fixtureName">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">型号</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="model" [(ngModel)]="this.fixture.model" [dValidateRules]="this.FixtureRules.model">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>类别</span>
                      </d-form-label>
                      <d-form-control>
                        <d-cascader
                          [options]="options"
                          [trigger]="'hover'"
                          [showPath]="true"
                          [allowClear]="true"
                          [dropdownWidth]="130"
                          name="deviceClassCode"
                          (ngModelChange)="CascaderonChanges($event)"
                          [(ngModel)]="this.option"
                          [dValidateRules]="this.FixtureRules.fixtureTypeId"
                      ></d-cascader>
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">购买时间</span>
                      </d-form-label>
                      <d-form-control>
                        <d-datepicker-pro  [appendToBody]="false"
                        name="purchaseDate"
                        [(ngModel)]="this.fixture.purchaseDate"
                        ></d-datepicker-pro>
                      </d-form-control>
                    </d-form-item>
                  </div>

                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">工作状态</span>
                      </d-form-label>
                      <d-form-control>
                        <d-radio-group
                          [values]="status"
                          name="status"
                          [direction]="'row'"
                          [(ngModel)]="chosenItem"
                          (ngModelChange)="statusChange()"
                        ></d-radio-group>
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">备注</span>
                      </d-form-label>
                      <d-form-control>
                        <textarea  class="form-input-box" name="model" [(ngModel)]="this.fixture.note" ></textarea>
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2"> </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">物料图片</span>
                      </d-form-label>
                      <d-form-control>
                        <ng-container *ngIf="fileUploaders.length > 0">
                          <div *ngFor="let fileUploader of fileUploaders let i = index"
                          class="devui-add-images">
                            <div
                              class="devui-add-items {{ fileUploader.status === 3 ? 'devui-upload-failed' : '' }}
                              {{ fileUploader.status === 2 ? 'devui-upload-success' : '' }}"
                            >
                              <span class="filename">{{ fileUploader.file.name }}</span>
                              <div *ngIf="fileUploader.status === 1" class="devui-loading">
                                <d-progress [percentage]="fileUploader.percentage" [height]="'5px'" [strokeColor]="'#50D4AB'"></d-progress>
                                <span (click)="deleteFile(fileUploader)" class="devui-cancel-upload">{{ CANCELUPLOAD }}</span>
                              </div>
                              <img  *ngIf="fileUploader.status === 2 || fileUploader.status === 3" [src]=getImagesArray(this.fixture.fileURL)[i]>
                            </div>
                            <span class="icon icon-delete {{ fileUploader.status === 3 ? 'devui-failed-icon' : '' }}" (click)="deleteFile(fileUploader)"></span>
                            <span *ngIf="fileUploader.status === 3" class="icon icon-running" (click)="dUpload.uploadFiles()" ></span>
                          </div>
                        </ng-container>
                        <div
                          dUpload
                          #dUpload="dUpload"
                          class="devui-add-images devui-upload {{ isDropOver ? 'devui-upload-dropover' : '' }}"
                          [enableDrop]="true"
                          [fileOptions]="fileOptions"
                          [uploadOptions]="uploadOptions"
                          [uploadedFiles]="uploadedFiles"
                          [fileUploaders]="fileUploaders"
                          (successEvent)="onSuccess($event)"
                        >
                          <span class="icon-op-add"></span>
                        </div>
                        <d-toast [value]="message"></d-toast>
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-2">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">物料附件</span>
                      </d-form-label>
                      <d-form-control>
                        <input type="file" #fileInput1 style="display: none" (change)="importFormExcel($event)">
                        <d-button bsStyle="common"  style="padding: 0 8px;" (btnClick)="onButtonClick()">
                          <span class="icon icon-upload"></span>
                          上传附件
                        </d-button>
                        <ng-container *ngIf="this.uploadedFiles2.length>0">
                          <div *ngFor="let item of uploadedFiles2 ; let i = index" class="fujian">
                              <div>
                                附件{{i+1}}
                              </div>
                              <div style="margin: 0 8px;" class="name" [title]="item.attachmentUrl">
                                {{item.name}}
                              </div>
                              <div class="caozuo">
                                <a [href]="item.attachmentUrl" target="_blank">下载</a>
                                <a (click)="deleteFile2(i)" class="delete">删除</a>
                                <span>{{item.lastModifiedDate | dateFormat}}</span>
                              </div>
                          </div>
                        </ng-container>

                      </d-form-control>
                    </d-form-item>
                  </div>

                </div>
              </div>
              <d-form-operation>
                <d-button bsStyle="primary" dFormSubmit >确定</d-button>
                <d-button class="ms-3" bsStyle="common" (btnClick)="cancle()">取消</d-button>
              </d-form-operation>
            </form>
          </div>

</div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
